/*全局设定*/* {
      box-sizing: border-box;
      padding:0;
      margin:0px;
      border-width: 0px;
      text-align: center;
}
/*主页面大小*/body{
      width: 100vw;
      height: 100vh;
      overflow: hidden;
}
/*整个页面塞进一个div里*/.页面布局总div{
      font-family: Arial, sans-serif;
      height: 100vh;
      display: grid;
      grid-template-rows: 1.5fr 8fr 0.5fr;
      grid-gap: 1vh;
      background-color: #f0f0f0;
}
.页面布局上{
      background-color: #4caf4fc0;
      padding: 2vh;
}
.页面布局中{
      background-color: #FFFFFF;
      padding: 2vh;
      box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.页面布局下{ 
      background-color: #333333cd; 
      padding: 2vh; 
}

/***结构：页面布局/轮播父盒子***/
.轮播父盒子 {
  background-color: #33333354;
  width: 80vw;
  height: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1vw;
  place-self: center;
}

/***结构：页面布局/轮播父盒子/轮播子盒子1、2、3***/
.轮播子盒子1 { 
      height:20vh;
      background-color: #7ebcff; 
}
.轮播子盒子2 { 
      height:20vh;
      background-color: #e37eff; 
}
.轮播子盒子3 { 
      height:20vh;
      background-color: #fff97e; 
}


/* 动画部分保持原样 */
.轮播子盒子1变宽{animation: 轮播盒子变宽动画 1s forwards; --上次盒子宽度: 1fr 1fr 8fr; --本次盒子宽度: 8fr 1fr 1fr;}
.轮播子盒子2变宽{animation: 轮播盒子变宽动画 1s forwards; --上次盒子宽度: 8fr 1fr 1fr; --本次盒子宽度: 1fr 8fr 1fr;}
.轮播子盒子3变宽{animation: 轮播盒子变宽动画 1s forwards; --上次盒子宽度: 1fr 8fr 1fr; --本次盒子宽度: 1fr 1fr 8fr;}
@keyframes 轮播盒子变宽动画 {0% { grid-template-columns: var(--上次盒子宽度); }100% { grid-template-columns: var(--本次盒子宽度); }}
.轮播子盒子1变高,.轮播子盒子2变高,.轮播子盒子3变高{animation: 轮播盒子变高动画 1s forwards; --上次盒子高度:20vh; --本次盒子高度: 72vh;}
.轮播子盒子1变低,.轮播子盒子2变低,.轮播子盒子3变低{animation: 轮播盒子变高动画 1s forwards; --上次盒子高度:72vh; --本次盒子高度: 20vh;}
@keyframes 轮播盒子变高动画 {0% { height: var(--上次盒子高度); }100% { height: var(--本次盒子高度); }}